<template>
  <CommonNav title="单词本">
    <template v-slot:search>
      <label class="input input-sm">
        <svg class="h-[1.5em] opacity-50" viewBox="0 0 24 24">
          <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
        <input type="search" class="grow text-sm" placeholder="搜索单词本,输入关键字" v-model="searchKeyword"
          @input="debouncedSearch" ref="searchInput" />
        <kbd class="kbd kbd-sm">⌘</kbd>
        <kbd class="kbd kbd-sm">K</kbd>
      </label>
    </template>
  </CommonNav>
  <CommonMain>
    <div role="" class="tabs tabs-border">
      <div class="flex" v-for="item, index in courseType" @click="courseTypeIndex = index, ClickCourseType()">
        <button class="relative px-4 py-2 text-base font-medium" :class="[courseTypeIndex == index ? 'text-primary' : '']">
          {{ item.title }}
          <span class="absolute bottom-0 left-[10%] w-[80%] h-[0.2rem] rounded bg-primary"
            v-if="courseTypeIndex == index"></span>
        </button>
      </div>
    </div>
    <div class="mt-5 flex gap-2 flex-wrap">
      <button class="btn" :class="['btn',
        courseLabelKey == item.key ? 'btn-primary' : '',
      ]" v-for="item in courseType[courseTypeIndex]?.label" @click="courseLabelKey = item.key, ClickTypeLabel()">
        {{ item.name }}
      </button>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 md:gap-5 mt-10" v-if="course?.length > 0">
      <div v-for="(item, index) in course" :key="index" class="card bg-base-100 shadow-xl">
        <nuxt-link :to="`/course/${item.id}`" class="h-full">
          <coursePack :item="item">
            <div class="mt-1 flex gap-2">
              <div class="badge badge-primary text-xs"> {{ item.wordNum }}词</div>
              <div class="badge badge-secondary text-xs"> 20个章节</div>
            </div>
            <!-- <div class="mt-1 flex gap-2 items-center">
                <div class="avatar-group -space-x-2 rtl:space-x-reverse">
                  <div class="avatar" v-for="(avatar, index) in defaultAvatars" :key="index">
                    <div class="w-6">
                      <img :src="avatar" />
                    </div>
                  </div>
                </div>
                <span class="text-xs text-gray-500">99+人</span>
              </div> -->

          </coursePack>
        </nuxt-link>
      </div>
    </div>
    <CommonLack v-show="!course" />
  </CommonMain>
</template>
<script setup>
definePageMeta({
  ssr: true
})
import { ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { getCourse, getCourseKey } from '~/composables/course/course';
import { getType } from '~/composables/course/courseType';
import {
  registerShortcut,
  cancelShortcut,
} from "~/composables/user/globalShortcut";
import {
  celebrate,
} from "~/composables/common/celebrate";
const courseType = await getType();
const courseLabelKey = ref('all');
const courseTypeIndex = ref(0);
const course = ref([]);
const searchKeyword = ref('');
const searchInput = ref(null);
const debouncedSearch = useDebounceFn(async () => {
  courseLabelKey.value = 'all';
  courseTypeIndex.value = -1;
  course.value = await getCourseKey(searchKeyword.value);
  console.log(course.value);
}, 300);
const ClickCourseType = async () => {
  courseLabelKey.value = 'all';
  searchKeyword.value = '';
  course.value = await getCourse(courseType[courseTypeIndex.value]?.id, courseLabelKey.value);
};
const ClickTypeLabel = async () => {
  course.value = await getCourse(courseType[courseTypeIndex.value]?.id, courseLabelKey.value);
};
ClickCourseType();
const registeredShortcuts = [];
onMounted(async () => {
  //检测快捷键
  registeredShortcuts.push(
    registerShortcut(
      "ctrl+k",
      (e) => {
        e.preventDefault();
        searchInput.value?.focus();
      },
      { priority: "high" }
    )
  );
});
onUnmounted(() => {
  registeredShortcuts.forEach((shortcut) => {
    cancelShortcut(shortcut);
  });
});
</script>
